<template>
  <!-- 历史计划 -->
  <el-dialog title="历史计划" :visible.sync="showHistorical" width="70%" :before-close="closeHistoricalPlan" :close-on-click-modal="false">
    <div class="m_title">{{ name }}</div>
    <el-table border ref="multipleTable" :data="list" tooltip-effect="dark" align="center" stripe>
      <el-table-column prop="time" label="填报时间" align="center"> </el-table-column>
      <el-table-column prop="money" label="填报金额" align="center"> </el-table-column>
      <el-table-column prop="plan" label="计划事项" align="center">
        <template slot-scope="scope">
          <div>{{ statusList == 1 ? scope.row.plan : '离职' }}</div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import Api from '../../../api/incomeAndExpenditurePlan';
export default {
  props: {
    showHistorical: {
      type: Boolean,
      default: true,
    },
    statusList: {
      type: Number,
      default: 1,
    },
    // 区分支出计划的弹框
    name: {
      type: String,
      default: '',
    },
  },

  watch: {
    name: {
      handler(val) {
        this.list = this.typeUpdateList(val);
      },
      deep: true,
      immediate: true,
    },
  },

  data() {
    return {
      list: [], // 渲染列表
      title: '',
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      Api.historyProject({
        planKey: $route.query.planKey,
      }).then(res=>{
        console.log(res);
      });
    },
    // 取消
    closeHistoricalPlan() {
      this.$emit('close-dialog', false);
    },
  },
};
</script>

<style lang="scss" scoped>
.m_title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
::v-deep .el-dialog {
  min-height: 400px;
  .el-dialog__header {
    background: #444;
  }
}
</style>
